<!-- Copyright (C) 2012-2025 Zammad Foundation, https://zammad-foundation.org/ -->

<script setup lang="ts">
import { storeToRefs } from 'pinia'

import { useSharedVisualConfig } from '#shared/composables/useSharedVisualConfig.ts'
import type { ObjectAttribute } from '#shared/entities/object-attributes/types/store.ts'
import { useApplicationStore } from '#shared/stores/application.ts'
import type { ObjectLike } from '#shared/types/utils.ts'

import { useDisplayObjectAttributes } from './useDisplayObjectAttributes.ts'

import type { OutputMode } from './types.ts'

export interface Props {
  mode?: OutputMode
  object: ObjectLike
  attributes: ObjectAttribute[]
  skipAttributes?: string[]
  includeStatic?: boolean
  alwaysShowAfterFields?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'view',
})

const { fields } = useDisplayObjectAttributes(props)
const { objectAttributes: objectAttributesConfig } = useSharedVisualConfig()

const { config } = storeToRefs(useApplicationStore())

const getDisplayLabel = (attribute: ObjectAttribute) =>
  attribute.displayConfig ? config.value[attribute.displayConfig] : attribute.display
</script>

<template>
  <Component :is="objectAttributesConfig.outer" v-if="fields.length || props.alwaysShowAfterFields">
    <template v-for="field of fields" :key="field.attribute.name">
      <Component :is="objectAttributesConfig.wrapper" :label="getDisplayLabel(field.attribute)">
        <CommonLink
          v-if="field.link"
          :link="field.link"
          :class="objectAttributesConfig.classes.link"
        >
          <Component
            :is="field.component"
            :attribute="field.attribute"
            :value="field.value"
            :config="objectAttributesConfig"
            :mode="mode"
          />
        </CommonLink>
        <Component
          :is="field.component"
          v-else
          :attribute="field.attribute"
          :value="field.value"
          :config="objectAttributesConfig"
          :mode="mode"
        />
      </Component>
    </template>
    <slot name="after-fields" />
  </Component>
</template>
